<template>
	<view class="mycard">
		<MyHeader :isBack="false" title="我的名片"></MyHeader>
		<view class="myHeader">
			<view class="header-main">
				<image class="header-img" src="../../static/imgs/weidenglu.png" mode=""></image>
				<view @tap="goLogin" class="mask-text" v-if="isLogin">
					授权登录
				</view>
				<view class="header-text">{{nickName}}</view>
			</view>
		</view>
		<view class="header-content">
			<view class="header-item">
				<view class="card-item" @tap="goCard">
					<image src="../../static/imgs/my-card.png" mode=""></image>
					<view class="card-text">名片</view>
				</view>
				<view class="card-item" @tap="goMessage">
					<image src="../../static/imgs/news.png" mode=""></image>
					<view class="card-text">消息</view>
				</view>
				<view class="card-item" @tap="goHelp">
					<image src="../../static/imgs/phone.png" mode=""></image>
					<view class="card-text">客服及帮助</view>
				</view>
			</view>
		</view>
		<MyTabbar :selected="selected"></MyTabbar>
		<view class="mask" v-if="isLogin">

		</view>
	</view>
</template>

<script>
	import MyTabbar from '../../Common/Tabbar/My-Tabbar.vue'
	import MyHeader from '../../Common/My-header/my-header.vue'
	import {authLogin} from '../../Service/login.js'
	import {stuCurrent} from '../../Service/sign.js'
	import {stuInfo} from '../../Service/student.js'
	import {mapState,mapActions} from 'vuex'
	export default{
		data(){
			return{
				selected:3,
				myInfo:null,
				params:{},
				isLogin:true,
				avatarUrl:'../../static/imgs/weidenglu.png',
				nickName:'玄凝大大'
			}
		},
		components:{
			MyTabbar,
			MyHeader
		},
		onShow() {
			this.getStu()
		},
		computed:{
			...mapState({
				signInfo:state => state.sign.signInfo,
				userList:state => state.user.userList,
				student:state => state.user.student
			})
		},
		methods:{
			...mapActions(['changeOpenIdAction','changeStatus','addsingInfoAction','changeStudentAction']),
			getStu(){
				if(uni.getStorageSync('token')){
					stuInfo().then(res=>{
						// console.log(res)
						if(!res.name) return
						this.myInfo = res
						this.changeStudentAction(res)
					}).catch(err=>{
						console.log(err)
					})
				}
			},
			getUser(){
				// 获取用户信息自带的
				if(wx.getUserProfile){
					wx.getUserProfile({
						desc:'用于展示用户昵称',
						lang:'zh_CN',
						success:userData=> {
							this.nickName = userData.userInfo.nickName
							this.avatarUrl = userData.userInfo.avatarUrl
							this.params.nickName = userData.userInfo.nickName
							this.params.avatarUrl = userData.userInfo.avatarUrl
							this.login()
						},
						fail: err => {
							this.isLogin = false
						}
					})
				}else{
					wx.getUserInfo({
						success:res=>{
							this.nickName = res.userInfo.nickName
							this.avatarUrl = res.userInfo.avatarUrl
							this.params.nickName = res.userInfo.nickName
							this.params.avatarUrl = res.userInfo.avatarUrl
							this.login()
						}
					})
				}
			},
			login(){
				uni.login({
					provider:'weixin',
					success: loginRes => {
						authLogin({
							code:loginRes.code
						}).then(res=>{
							// 把openID保存到vuex当中
							this.params.openId = res.openId
							 this.changeOpenIdAction(this.params)
							 // 存储token到本地
							 uni.setStorageSync('token',res.token)
							 // 获取学生信息
							 this.getStu()
							 // 获取学生协议信息
							 stuCurrent().then(res=>{
								 if(res.resultCode === 1020) return
								 res.classProtocolPath = res.classProtocolPath
								 res.signProtocolPath = 'https://fawnaut.xuexiluxian.cn/api'+res.signProtocolPath
								 this.addsingInfoAction(res)
								 this.changeStatus({status:1})
 							 }).catch(err=>{
								 console.log(err)
							 })
							 uni.showToast({
							 	title:'登录成功',
								icon:'none'
							 })
						})
					},
					fail() {
						uni.showToast({
							title:'登录失败',
					
						})
					}
				})
			},
			// 登录授权
			goLogin(){
				if(this.isLogin){
					this.getUser()
					this.isLogin =false
				}
			},
			goCard(){
				if(this.myInfo){
					uni.navigateTo({
						url:'../index/index'
					})
				}else{
					uni.showToast({
						title:'请先入学',
						icon:'none'
					})
				}
			},
			goMessage(){
				uni.showToast({
					title:'敬请期待',
					icon:'none'
				})
			},
			goHelp(){
				uni.navigateTo({
					url:'../consult-help/consult-help'
				})
			}
		}
	}
</script>

<style scoped>
	scroll-view::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		background: transparent;
		color: transparent;
	}
	.mycard{
		margin-top: 140rpx;
		position: relative;
		width:100vw;
		height: 100vh;
	}
	.myHeader{
		width: 100%;
		height: 240rpx;
		background-color: #00aaff;
	}
	.header-main{
		display: flex;
		align-items: center;
		line-height: 48rpx;
		padding-top: 20rpx;
		margin-left: 40rpx;
	}
	.header-img{
		width: 148rpx;
		height: 148rpx;
		border-radius: 50%;
	}
	.header-text{
		font-size: 48rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-left: 40rpx;
	}
	.header-content{
		width: 100%;
		height: 100%;
		background-color: #C8C7CC;
	}
	.header-item{
		width: 80%;
		height: 100%;
		position: absolute;
		left: 40rpx;
		top:204rpx
	}
	.card-item{
		width: 680rpx;
		height: 120rpx;
		display: flex;
		background-color: #FFFFFF;
		margin: 0 auto;
		align-items: center;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}
	.card-item image{
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
	.card-text{
		margin-left: 20rpx;
	}
	.mask{
		position: absolute;
		top:0;
		left: 0;
		z-index: 998;
		height: 100%;
		width: 100%;
		opacity: 0.7;
		background-color: #000000;
		filter: alpha(opacity=70%);
	}
	.mask-text{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 999;
		color: #FFFFFF;
		font-size: 44rpx;
		font-weight: 400;
	}
</style>
